<template>
	<panel-main class="menu-view" title="菜单" v-if="menusList">
		<el-menu :default-active="defaultActive" @select="menuSelect" :default-openeds="defaultOpeneds">
			<template v-for="item in menusList">
				<el-submenu v-if="item.childs!=null&&item.hide!=0" :key="item.url" :index="0+''">
					<template slot="title">
						<i :class="['iconfont', item.img]"></i>
						<span slot="title">{{item.name}}</span>
					</template>
					<el-menu-item v-show="itemz.hide!=0" v-for="itemz in item.childs" :key="itemz.url" :index="itemz.url">
						<template slot="title">
							<i :class="['iconfont', itemz.img]"></i>
							<span slot="title">{{itemz.name}}</span>
						</template>
					</el-menu-item>
				</el-submenu>
				<el-menu-item v-if="!item.childs&&item.hide!=0" :key="''+item.url" :index="item.url">
					<template slot="title">
						<i :class="['iconfont', item.img]"></i>
						<span slot="title">{{item.name}}</span>
					</template>
				</el-menu-item>
			</template>
		</el-menu>
	</panel-main>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				defaultActive: this.$route.path,
				defaultOpeneds: [0]
			}
		},
		watch: {
			$route(to, from) {
				this.defaultActive = to.path
			}
		},
		computed: {
			...mapGetters([
				'authMenuData',
			]),
			menusList: function() {
				for (let item of this.authMenuData) {
					if (this.$route.path.indexOf(item.path) > -1) {
						return item.childs
					}
				}
				return null
			}
		},
		methods: {
			menuSelect(url) {
				this.$router.push(url);
			}
		},
	};
</script>

<style scoped lang="scss">
	.menu-view {
		width: 220px;

		::v-deep .el-menu {
			border: 0;
			.el-submenu__title{
				line-height: 40px;
				height: 40px;
			}
			.el-menu-item,.el-submenu__title {
				height: 40px;
				line-height: 40px;

				i {
					margin-right: 5px;
					width: 24px;
					text-align: center;
					font-size: 18px;
					vertical-align: middle;
				}
			}

			.is-active {
				background-color: $color-main-emphasis;
				color: #fff;
				.el-submenu__title{
					background-color: #fff;
				}
			}
		}

	}
</style>
